import { settings, changeSetting, events, actions } from "../settings";

const ActionSettings = () =>
  Object.keys(events).map((eventName) => (
    <div key={eventName}>
      <label class="label" for={eventName}>
        {events[eventName].name} ({String(events[eventName].actions.length)})
      </label>
      <select
        value={settings.value.actions[eventName]}
        class="select"
        id={eventName}
        onChange={(event) => {
          changeSetting(
            "actions",
            eventName,
            Number.parseInt(event.target.value),
          );
        }}
      >
        {events[eventName].actions.map((index) => (
          <option key={index} value={index}>
            {actions.find((item) => item.id === index).name}
          </option>
        ))}
      </select>
    </div>
  ));

export default ActionSettings;
